<template>
	<view class="content">
		<view class="top-nav" ref="nav">
			<view class="tab-wrap">
				<view v-for="(item,index) in menus" :key="item.menu_key" class="tab-item" :class="{active:item.menu_key===activeMenu.menu_key}" @click="changeMenu(item,index)">
					<text class="tab-text" :class="{'has-dot':item['red_dot']===1}">{{item.menu_name}}</text>
					<!-- <text class="tab-text">{{item.menu_name}}</text> -->
					<view class="tab-line" v-show="item.menu_key===activeMenu.menu_key"></view>
				</view>
				<view class="about-btn" @click="goNewGuide">
					新人指南
				</view>
			</view>
			<!-- <view class="tab-children-wrap" v-if="activeMenu.sub_menu.length!==0">
				<view class="tab-child" v-for="child in activeMenu.sub_menu" :key="child.menu_key" :class="{active:subActiveMenu.menu_key===child.menu_key}" @click="changeSubMenu(child)">
					{{child.menu_name}}
				</view>
			</view> -->
		</view>
		<notice-bar :list="noticeList" :autoplay="noticePlay" class="notice-bar" v-if="noticeList.length>0"></notice-bar>
		<view class="scroll-wrap">
			<swiper :current="activeMenuIndex" class="swipe-wrap" duration="300" @change="changeTab">
				<swiper-item v-for="(menu,menuIndex) in menus" :key="menu.menu_key" >
					<MescrollUni :top="0" :down="downOption" @down="downCallback"
					 :up="upOption" @up="upCallback" @emptyclick="onEmptyClick"  @init="mescrollInit(menuIndex,$event)" class="scroll-box">
						 <view class="li-wrap" v-for="(item,index) in menu.dataList" :key="item.label">
							 <view class="li-wrap-label" v-if="item.label&&item.list.length>0">
								{{item.label}}
							 </view>
							<view v-for="(child,childIndex) in item.list" :key="child.group_id" @click="goDetail(child,index,childIndex)" class="card-li">
								<user-header :info="child"></user-header>
								<text class="li-cont">
									{{child.my_wish}}
								</text>
								<product-item :info="child" :rightText="child.is_me===1?'分享':'支持TA'" @right-click="onWishRightClick(child,index,childIndex)" class="li-product"></product-item>
							</view>
						 </view>
						 <view class="scroll-no-more" slot="nodata">
							 <view class="scroll-no-more-top">
								<text class="scroll-no-more-line"></text>
								<view class="scroll-no-more-mid">
									没有更多了
								</view>
								<text class="scroll-no-more-line"></text>
							 </view>
							<view class="scroll-no-more-btn" @click="onEmptyClick" v-if="activeMenu.menu_key==='circle'">去广场看看</view>
						 </view>
					</MescrollUni>
				</swiper-item>
			</swiper>
		</view>
		<single-support ref="single" hideBar :isTopOffset="false" @success="onSuccessSupport"></single-support>
		<new-guy-popup></new-guy-popup>
		<login-popup :isTopOffset="false" :visible.sync="showLogin" @success="onLoginSuccess"/>
		<share-popup :visible.sync="sharePopupVisible" @init="initShareInfo" hideBar :groupId="selShareId"></share-popup>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import {mergeObj} from '@/common/common.js'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import SingleSupport from '@/components/popups/single-support-popup.vue'
	import NewGuyPopup from '@/components/popups/new-guy-popup.vue'
	import SharePopup from '@/components/share-popup.vue'
	import ProductItem from "@/components/product/item.vue"
	import UserHeader from "@/components/user/header.vue"
	import LoginPopup from '@/components/login-popup.vue'
	import NoticeBar from '@/components/wish-notice-bar.vue'
	// #ifdef MP-WEIXIN
	import ShareMixin from '@/mixins/share-mixin.js'
	// #endif
	export default {
		// #ifdef MP-WEIXIN
		mixins: [ShareMixin],
		// #endif
		components: {
			MescrollUni,
			SingleSupport,
			NewGuyPopup,
			SharePopup,
			ProductItem,
			UserHeader,
			LoginPopup,
			NoticeBar
		},
		computed:{
			...mapGetters([
				'hasBind'
			])
		},
		data() {
			return {
				topShareInfo:{
					share_title:'这个心愿圈有点有趣，邀请你也来看看！',
					path:'/pages/index/index',
					share_img:'https://cdn.zhixianggo.com/config/f26ecd782a8e082eda2d5f311950dc2e.png'
				},
				activeMenu:{},
				activeMenuIndex:0,
				subActiveMenu:'',
				menus:[],
				downOption: {
					autoShowLoading:true,
					auto:false,
					use: true
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false,
					onScroll: true,
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 15 // 每页数据的数量,默认10
					},
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '当前没有任何朋友心愿',
						btnText:'去广场看看'
					}
				},
				sharePopupVisible:false,
				showLogin:false,
				selWish:'',
				selWishIndex:[],
				selShareId:'',
				isFirst:true,
				noticeList:[],
				noticePlay:false
			}
		},
		onLoad() {
			this.initMenu()
			uni.$on('refreshSingle',(data)=>{
				console.log('触发on:',data)
				this.onRefreshSingle(data)
			})
		},
		onShow(){
			this.noticePlay=true
			if(!this.isFirst){
				this.refreshMenu()
			}
			this.getNotices()
			uni.setNavigationBarTitle({
				title:'心愿圈'
			})
		},
		onHide(){
			this.noticePlay=false
		},
		methods: {
			mescrollInit(index,mescroll) {
				this.menus[index].mescroll=mescroll
				if(this.activeMenuIndex===index){
					this.setPageOption()
					mescroll.resetUpScroll()
					this.menus[index].loaded=true
					this.isFirst=false
				}
			},
			onRefreshSingle({index,childIndex,wish}){
				if(typeof index==='number'){
					this.menus.forEach(menu=>{
						menu.dataList.forEach(data=>{
							data.list.forEach((item,itemIndex)=>{
								if(item.group_id==wish.group_id){
									data.list.splice(itemIndex,1,mergeObj(item,wish))
								}
							})
						})
					})
					// let child=mergeObj(this.activeMenu.dataList[index].list[childIndex],wish)
					// this.activeMenu.dataList[index].list.splice(childIndex,1,child)
				}
			},
			async initMenu(){
				let res = await this.$api.homeMenu()
				res.forEach(item=>{
					item.dataList=[]
					item.mescroll=null
				})
				this.menus=res
				let defaultIndex=this.menus.findIndex(item=>item.is_default===1)
				if(defaultIndex===-1){
					defaultIndex=0
				}
				this.activeMenu=this.menus[defaultIndex]
				this.activeMenuIndex=defaultIndex
			},
			async refreshMenu(key){
				let needRefreshList=this.menus.filter(item=>item.menu_key!==key)
				needRefreshList.forEach(async menu=>{
					let data=await this.$api.homeList({menu_key:menu.menu_key,page:1,page_size:10,first_timestamp:menu.first_timestamp},{loading:false})
					let target=data.find(item=>item.hasOwnProperty('page_size'))
					if(target.red_dot===1){
						menu.red_dot=1
					}
					menu.first_timestamp=target.first_timestamp
				})
			},
			onLoginSuccess(){
				 this.$refs.single.open({wish:this.selWish})
			},
			onEmptyClick(){
				this.changeMenu(this.menus[1],1)
			},
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			changeMenu(menu,index){
				this.activeMenuIndex=index
			},
			//swiper 切换
			changeTab(e){
				this.activeMenuIndex = e.target.current;
				this.activeMenu=this.menus[this.activeMenuIndex]
				this.setPageOption()
				if(!this.activeMenu.loaded){
					this.activeMenu.mescroll.resetUpScroll()
					this.activeMenu.loaded=true
				}else{
					this.refreshMenu()
				}
			},
			upCallback(mescroll) {
				let page = mescroll.num // 页码, 默认从1开始
				let pageSize = mescroll.size // 页长, 默认每页10条
				let menuKey = this.activeMenu.menu_key
				this.$api.homeList({menu_key:menuKey,page,page_size:pageSize,first_timestamp:this.activeMenu.first_timestamp},{loading:false}).then(
					res=>{
						let moreList=res.find(item=>item.hasOwnProperty('page_size'))
						if(mescroll.num == 1) {
							this.activeMenu.dataList=res
							this.activeMenu.first_timestamp=moreList.first_timestamp
							this.activeMenu.red_dot=0
							// if(this.isFirst){
							// 	this.isFirst=false
							// }else{
							// 	this.activeMenu.red_dot=moreList.red_dot
							// }
							this.refreshMenu(menuKey)
						}else{
							let targetItemIndex=this.activeMenu.dataList.findIndex(item=>item.label===moreList.label)
							console.log(targetItemIndex)
							if(targetItemIndex!==-1){
								let targetItem=this.activeMenu.dataList[targetItemIndex]
								targetItem.list=targetItem.list.concat(moreList.list)
							}
						}
						mescroll.endBySize(moreList.list.length,moreList.count)
					},
					()=>{
						mescroll.endErr()
					}
				)
			},
			async getNotices(){
				let data = await this.$api.getIndexNotice({},{loading:false})
				this.noticeList=data
			},
			setPageOption(){
				if(this.activeMenu){
					this.upOption.page.size=this.activeMenu.page_size
				}
			},
			goDetail(item,index,childIndex){
				uni.navigateTo({
					url:`/pages/wish/detail?group_id=${item.group_id}&index=${index}&childIndex=${childIndex}`
				})
			},
			goNewGuide(){
				uni.navigateTo({
					url:'/pages/my/new-guide'
				})
			},
			onWishRightClick(child,index,childIndex){
				if(child.is_me===1){
					this.selShareId=child.group_id
					this.sharePopupVisible=true
				}else{
					this.showSingleSupport(child,index,childIndex)
				}
			},
			showSingleSupport(item,index,childIndex){
				this.selWish=item
				this.selWishIndex=[index,childIndex]
				if(!this.hasBind){
					this.showLogin=true
				}else{
					 this.$refs.single.open({wish:item})
				}
			},
			onSuccessSupport(){
				this.activeMenu.dataList[this.selWishIndex[0]].list[this.selWishIndex[1]].i_had_support=1
				this.activeMenu.dataList[this.selWishIndex[0]].list[this.selWishIndex[1]].join_people+=1
				this.selWishIndex=[]
			},
			changeSubMenu(menu){
				this.subActiveMenu=menu
				this.setPageOption()
				this.activeMenu.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style lang='scss' >
	.content {
		display: flex;
		height: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #F6F6F6;
	}

	.top-nav {
		width: 100%;
		background-color: #fff;
	}
	.tab-wrap{
		position: relative;
		display: flex;
		align-items: center;
		height: 110rpx;
		padding: 0 36rpx;
		box-sizing: border-box;
	}
	.tab-item{
		position: relative;
		/* height: 80rpx;
		width: 110rpx; */
		&:not(:last-child){
			margin-right: 40rpx;
		}
		&.active{
			.tab-text{
				display: block;
				position: relative;
				color:#333;
				transform: scale(1.2);
			}
		}
	}
	.tab-text{
		position: relative;
		font-size: 44rpx;
		color: #666;
		transition: all .2s linear;
		&.has-dot{
			&:after{
				content:'';
				position: absolute;
				top:0;
				right: -15rpx;
				width:16rpx;
				height:16rpx;
				background:rgba(231,64,74,1);
				border-radius: 16rpx;
			}
		}
	}
	.tab-line{
		position: absolute;
		bottom: -22rpx;
		left: 50%;
		width: 50rpx;
		height: 14rpx;
		margin-left: -25rpx;
		border-radius: 14rpx;
		background-color: #E7404A;
		overflow: hidden;
		&:before,&:after{
			content:'';
			position: absolute;
			top:0;
			left: 0;
			width:14rpx;
			height:14rpx;
			background:rgba(255,124,121,1);
			border-radius: 14rpx;
		}
		&:after{
			background-color: #C3333C;
			left: initial;
			right: 0;
		}
	}
	.about-btn{
		display: flex;
		position: absolute;
		top:50%;
		right: 36rpx;
		align-items: center;
		justify-content: center;
		margin-top: -27rpx;
		width:152rpx;
		height:54rpx;
		font-size: 24rpx;
		color:#666;
		border-radius:27px;
		border:1px solid rgba(216,216,216,.5);
	}
	.tab-children-wrap{
		display: flex;
		height: 110rpx;
		padding: 0 36rpx;
		align-items: center;
	}
	.tab-child{
		display: flex;
		align-items: center;
		justify-content: center;
		width:130rpx;
		height:54rpx;
		border-radius:27rpx;
		border:1rpx solid rgba(216,216,216,1);
		font-size: 30rpx;
		color:#666;
		&:not(:last-child){
			margin-right: 30rpx;
		}
		&.active{
			font-weight:600;
			color:rgba(231,64,74,1);
		}
	}
	.notice-bar{
		width: 100%;
	}
	.scroll-wrap {
		position: relative;
		flex: 1;
		width: 100%;
	}
	.swipe-wrap{
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
		left: 0;
	}
	.scroll-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
		left: 0;
	}
	.li-wrap-label{
		display: flex;
		height: 60rpx;
		padding-left: 36rpx;
		align-items: center;
		font-size: 26rpx;
		color:#999;
	}
	.item {
		height: 200rpx;
		background: #3F536E;
	}
	.card-li{
		padding:40rpx 36rpx;
		background: #fff;
		&:not(:last-child){
			margin-bottom: 20rpx;
		}
	}
	
	.li-cont{
		font-size:30rpx;
		color:#333;
	}
	.li-product{
		
	}
	.scroll-no-more-top{
		display: flex;
		align-items: center;
		padding: 0 46rpx;
	}
	.scroll-no-more-line{
		flex:1;
		height: 1rpx;
		background-color: #D8D8D8;
	}
	.scroll-no-more-mid{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding:0 24rpx;
		font-size: 24rpx;
		color:#999999;
		&::before,&::after{
			position: absolute;
			content:'';
			left:0;
			top:50%;
			transform: translateY(-50%);
			width:7rpx;
			height:7rpx;
			border-radius: 100%;
			background-color: #d8d8d8;
		}
		&::after{
			left: initial;
			right: 0;
		}
	}
	
	.scroll-no-more-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width:154rpx;
		height:54rpx;
		margin: 14rpx auto 0;
		font-size: 24rpx;
		color: #E7404A;
		border-radius:27rpx;
		border:1px solid rgba(231,64,74,0.4);
	}
</style>
